<template>
    <div>
        <!--导航条-->
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="任务管理" name="first"></el-tab-pane>
            <el-tab-pane label="地堆管理" name="second"></el-tab-pane>
            <el-tab-pane label="设备管理" name="third"></el-tab-pane>
            <el-tab-pane label="用户管理" name="fourth"></el-tab-pane>
        </el-tabs>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "tabbar",
        data() {
            return {
                activeName: 'first'
            }
        },
        created() {
            if(this.$route.path=="/task"){
                this.activeName='first'
            }else if(this.$route.path=="/stack"){
                this.activeName='second'
            }else if(this.$route.path=="/device"){
                this.activeName='third'
            }else if(this.$route.path=="/user"){
                this.activeName='fourth'
            }
        },
        methods: {
            handleClick(tab, event) {
                if(tab.name=="first"&&event.type=="click"){
                    this.$router.replace({path:"/task"}).catch(err => err);
                }else if(tab.name=="second"&&event.type=="click"){
                    this.$router.replace({path:"/stack"}).catch(err => err);
                }else if(tab.name=="third"&&event.type=="click"){
                    this.$router.replace({path:"/device"}).catch(err => err);
                }else if(tab.name=="fourth"&&event.type=="click"){
                    this.$router.replace({path:"/user"}).catch(err => err);
                }
            }
        }
    }
</script>

<style scoped>

</style>